<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/ss.css">
    <style>
        body{
    background: url("img/bg.jpg");
    background-size: 100vw 100vh;
    background-repeat: no-repeat;
    box-sizing: border-box;
    box-sizing: content-box;
}
        .tou{
            width: 100%;
            height: 8vh;
            border: red 1px solid;
            /* background-color: seagreen; */
        }
        .neir{
            width: 100%;
            height: 92vh;
            /* border: red 1px solid; */
        }
        .shang{
            width: 100vw;
            height: 60vh;
            /* border: solid yellow 1px; */
            display: flex;
            flex: 11;
        }
        .dv1{
            flex:4;
            
        }
        .dv1shang{
            width: 100%;
            height: 30vh;
            /* background: url("img/pulefttop.png"); */
            background-size: 100% 100%;
            background-repeat: no-repeat
            ;
            background-color: salmon;
        }
        .dv1xia{
            width: 100%;
            height: 30vh;
           
            background: url("img/pumiddbott.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            margin: 5px 5px  0 0px;
        }
        .dv2{
            flex:4;
         
            display: flex;
            flex: 4;
        }
        .dv2zuo{
            flex: 2;
          
            background: url("img/hdbjr.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            margin-left: 5px;

        }
        .dv2you{
            flex: 2;
         
            background: url("img/hdbjr.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            margin-left: 5px;

        }

        .dv3{
            flex:3;
      
        }
        .dv3shang{
            width: 88%;
            height: 30vh;
            /* border: white 1px solid; */
            background: url("img/midtop.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            margin-left: 5px;
        }
        .dv3xia{
            width: 88%;
            height: 30vh;
            /* border: white 1px solid; */
            background: url("img/midtop.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
         margin: 5px 0 0 5px ;
            

        }
        #dv3xia{
            width: 100%;
            height: 28vh;
            /* border: white 1px solid; */
            /* background: url("img/midtop.png"); */
            /* background-size: 100% 100%; */
            /* background-repeat: no-repeat; */
         /* margin: 5px 0 0 5px ; */
         padding:8px 0 0 5px ;
            

        }
        #yuan{
            width: 100%;
            height: 28vh; 
         padding:8px 0 0 5px ;

        }
        .xia{
            width: 100vw;
            height: 32vh;
            /* border: solid yellow 1px; */
        }
        ul{
            list-style: none;
            width: 40%;
            height: 8vh;
            background-color: sienna;
          
        }
      /* 画圆 */
      .diqu{
          color: #ffff;
          margin-left: 20px;
      }
      #ctx{
        width: 100%;
            height: 26vh;
            border: slateblue 1px solid;
            z-index: -1;
      }
      .dv2xia{
            width: 37%;
            height: 30vh;
           
            background: url("img/pumiddbott.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            margin-top: 10px;
            
        }
    #mychart{
        width: 60%;
        height: 28vh;
        border: 1px solid #ccc;
        float: left;
    }
    .box{
        float: right;
        width: 39%;
        height: 30vh;
        background-color: blueviolet;
        border-radius:5px ;
    
    }
    .shijian{
        color: #ffff;
        font-size: 4px;
    }
    </style>
</head>
<body>
    <!-- 头  剧情分析 -->
    <div class="tou">
<!-- <ul>
    <li class="lost">11</li>
</ul> -->
    </div>
    <!-- 中间部分 -->
    <div class="neir">
        <!-- 上半部分 -->
        <div class="shang">
    
            <div class="dv1">
                <div class="dv1shang">
                    <!-- 画圆 -->
                <span class="diqu">地区：甘改</span>
<div>
    <canvas id="ctx" width="100" height="100"></canvas>

</div>

                </div>
                <div class="dv1xia">

                </div>
            </div>
            <div class="dv2">
                <div class="dv2zuo"></div>
                <div class="dv2you"></div>
            </div>
            <div class="dv3">
                <div class="dv3shang">
                    <div id="yuan">

                    </div>
                </div>
                <!-- 右边 -->
                <div class="dv3xia">
                    <div id="dv3xia">
                    
                    </div>
                </div>
            </div>
        </div>
        <!-- 下部分 -->
        <div class="xia">
            
            <!-- 第一个 -->
          <div class="dv2xia">
            <div id="mychart">    </div>
<div class="box">
    <p class="shijian">时间段：2021-12-10至2021-12-10</p>
</div>


            <!-- 时间段 -->
            
            </div> 
            <!-- <div class="dvxia">

            </div>
            <div class="dv3xia">

            </div> -->
        </div>
    </div>
</body>
<script src="./lib/echarts.js"></script>
<script src="./lib/purple-passion.js"></script>
<script>
    let Dtat = document.querySelector('#mychart')
    let chart = echarts.init(Dtat,'purple-passion')
    // 右边
    
    let Dtat1 = document.querySelector('#dv3xia')
    let chart1 = echarts.init(Dtat1,'purple-passion')
    // 圆
    let Dtat2 = document.querySelector('#yuan')
    let chart2= echarts.init(Dtat2,'purple-passion')

    let config = {
        title: {
            text: '数据统计图'
        },
        //图例
        legend: {
            data: ['销量','人口','销售量']
        },
        //x轴
        xAxis: {
            data: ['刺客', '打野', '中单', '上单', '剑姬']
        },
        //y轴
        yAxis: {},
        //系列-重点
        series: [{
            name: '销量',
            type: 'bar',
            data: [200, 300, 100, 180, 400]
        },{
            name: '人口',
            type: 'line',
            data: [220,330, 110, 200, 500]
        },{
            name:'销售量',
            type:'pie',
            center:['87%',50],
            radius:'15%',
        color:['red','#ad7b67','#6398d6'],
            data:[
                {
                name:'牛奶',
                value:'100'
            },{
                name:'面包',
                value:'100' 
            }
        ]
        }
    ]
    }

    //渲染图表
    chart.setOption(config)
    let config1 = {
        xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['6-DB', '6-09', '6-10', '6-11', '6-12', ]
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [0, 100, 159, 250, 10, 10, 500],
      type: 'line',
      areaStyle: {}
    }
  ]
    }

    //渲染图表
    chart1.setOption(config1)

  let  option = {
  backgroundColor: '#2c343c',
  title: {
    text: 'Customized Pie',
    left: 'center',
    top: 20,
    textStyle: {
      color: '#ccc'
    }
  },
  tooltip: {
    trigger: 'item'
  },
  visualMap: {
    show: false,
    min: 80,
    max: 600,
    inRange: {
      colorLightness: [0, 1]
    }
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '55%',
      center: ['50%', '50%'],
      data: [
        { value: 335, name: 'Direct' },
        { value: 310, name: 'Email' },
        { value: 274, name: 'Union Ads' },
        { value: 235, name: 'Video Ads' },
        { value: 400, name: 'Search Engine' }
      ].sort(function (a, b) {
        return a.value - b.value;
      }),
      roseType: 'radius',
      label: {
        color: 'rgba(255, 255, 255, 0.3)'
      },
      labelLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        },
        smooth: 0.2,
        length: 10,
        length2: 20
      },
      itemStyle: {
        color: '#c23531',
        shadowBlur: 200,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      },
      animationType: 'scale',
      animationEasing: 'elasticOut',
      animationDelay: function (idx) {
        return Math.random() * 200;
      }
    }
  ]
};

chart2.setOption(option);
</script>
</html>
